<template>
  <el-select
    @change="changeVal"
    v-model="selValue"
    filterable
    :multiple="multiple"
    placeholder="请选择"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.fullName"
      :value="item.id"
    ></el-option>
  </el-select>
</template>

<script>
import { getPlaybackUser } from "@/api/permission/user";
export default {
  props: {
    value: {
      type: [String, Array],
      default: null,
    },
    rangeList: {
      type: Array,
      default: [],
      event: "input", // 默认是 input
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: [],
      selValue: null,
    };
  },
  created() {
    this.selValue = this.value;
    this.getPlaybackUserFn();
  },
  methods: {
    getPlaybackUserFn() {
      if (this.rangeList.length > 0) {
        getPlaybackUser(this.rangeList).then((res) => {
          this.options = res.data.list;
        });
      }
    },
    changeVal() {
      let arr = [];
      if (this.multiple) {
        this.selValue.forEach((el) => {
          const obj = this.options.find((item) => item.id == el);
          arr.push(obj);
        });
      } else {
        const obj = this.options.find((item) => item.id == this.selValue);
        arr.push(obj);
      }
      this.$emit("input", this.selValue);
      this.$emit("change", arr);
    },
  },
};
</script>

<style></style>
